<template>
  <div class="tab-view">
    <el-tabs class="main-tab" v-model="activeTab" type="border-card" @tab-remove="removeTab">
      <el-tab-pane
          :key="item.appName || item.id"
          v-for="(item) in menuTabs"
          :label="item.title"
          :closable="!item.noClose"
          :name="item.id">
        <span slot="label" class="label">
          {{item.title}}
          <i @click="refresh(item.id)" v-if="activeTab === item.id && !item.appName" class="el-icon-refresh"></i>
        </span>
        <div :id="item.container" v-if="item.appName" class="sub-app-root"></div>
        <template v-else>
          <component :tab="item" :isActiveTab="activeTab === item.id" v-if="refreshFlg[item.id]" :ref="'component_'+item.id" :is="getComponent(item)" class="content-view"></component>
        </template>
      </el-tab-pane>
    </el-tabs>
    <el-dropdown trigger="click" class="action" data-flex="cross:center"
                 @command="removeTabs" @visible-change="toggleMenuVisible">
      <span class="p-h-4 p-v-10 cp" :class="{'menu-visible': menuVisible}"><i class="el-icon-arrow-down"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="noActive">关闭未激活</el-dropdown-item>
        <el-dropdown-item command="left">关闭左边</el-dropdown-item>
        <el-dropdown-item command="right">关闭右边</el-dropdown-item>
        <el-dropdown-item command="all" divided>关闭所有</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      menuVisible: false,
      refreshFlg: {}
    }
  },
  computed: {
    ...mapState(['menuTabs']),
    activeTab: {
      get () {
        return this.$store.state.activeTab
      },
      set (value) {
        this.$tab.change(value, this.$route.fullPath)
      }
    }
  },
  watch: {
    menuTabs: {
      handler (val) {
        const obj = {}
        val.forEach(v => (obj[v.id] = true))
        this.refreshFlg = obj
      },
      immediate: true
    }
  },
  created () {
    this.$bus.$off('refresh-tab') // 防止重复注册
    this.$bus.$on('refresh-tab', this.refreshTab)
  },
  methods: {
    getComponent (item) {
      return item.component || this.$tab.getComponent(item.path)
    },
    toggleMenuVisible (visible) {
      this.menuVisible = visible
    },
    removeTab (key) {
      this.$tab.closeById(key)
    },
    removeTabs (command) {
      this.$store.commit('closeTabs', command)
    },
    refresh (id) {
      const tabComponent = this.$refs['component_' + id][0]
      const { onRefresh, reLoad } = tabComponent
      if (onRefresh) {
        onRefresh()
      } else if (reLoad) {
        reLoad()
      } else {
        this.refreshFlg[id] = false
        this.$nextTick(_ => (this.refreshFlg[id] = true))
      }
    },
    refreshTab (path) {
      const tab = this.menuTabs.find(mt => mt.path === path)
      if (tab) {
        this.refresh(tab.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab-view {
    position: relative;
    .main-tab {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      height: 100%;
      border-bottom: 0;
      border-right: 0;

      /deep/ .el-tabs__header{
        margin-right: 24px;
        padding: 0;
        flex: 0 0 39px;

        .el-tabs__nav-wrap.is-scrollable{
          padding: 0 16px;
        }
        .el-tabs__nav-prev{
          width: 16px;
          text-align: center;
          border-right: 1px solid #e4e7ed;
        }
        .el-tabs__nav-next{
          width: 16px;
          text-align: center;
          border-left: 1px solid #e4e7ed;
        }
        .el-tabs__item.is-active{
          margin-top: 0;
        }
      }
      /deep/ .el-tabs__content{
        padding: 10px;
        flex: 1 1 auto;
        overflow: auto;
        height: calc(100vh - 52px - 10px - 40px - 20px - 2px);
      }
    }
  }
  .action {
    width: 24px;
    position: absolute;
    top: 1px;
    right: 0;
    height: 39px;
    background-color: #f5f7fa;
    border-left: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
  }
  .el-dropdown {
    span:focus{
      outline: none;
    }
    i{
      transition: all 0.3s;
    }
    .menu-visible i{
      transform: rotate(180deg) translateZ(0);
    }
  }
  .el-tabs /deep/ .el-icon-close:hover{
    transform:rotate(180deg) translateZ(0);
    transition:transform 0.5s linear;
  }
  .el-icon-refresh{
    width: 12.61px;
    height: 13px;
    font-size: 12.6px;
    line-height: 13px;
    text-align: center;
    transform:rotate(0deg) translateZ(0);
    transition:transform 0.5s linear;
    display: inline-block;
    position: relative;
    bottom: 0.6px;
  }
  .label i:hover{
    transform:rotate(180deg) translateZ(0);
  }
</style>
